<template>
  <div style="width: 1200px;height: 600px;">
    <div style="width: 100px;height: 100px">
    </div>
    <center>
      <div style="align-content: center">
        <van-button @click="show_true_username" size="large" style="width: 160px;background-color: deepskyblue">用户名登录</van-button>
        <van-button @click="show_true_phone" size="large" style="width: 160px;background-color: deepskyblue">手机号登录</van-button>
      </div>
      <div v-show="show_username" style="width: 400px;height: 150px">
        <van-field label="用户名:" placeholder="请输入用户名" v-model="username" style="width: 350px; "></van-field>
        <van-field label="密码:" placeholder="请输入密码" type="password" :center="true" v-model="password"
                   style="width: 350px" ></van-field>
        <van-field label="验证码:" placeholder="请输入验证码" v-model="verification_code" style="width: 350px"  @change="account_code">
          <template #button>
            <img :src="imageurl" alt="图形验证码" class="pic_code" @click="get_image"
                 style="width: 100px;height: 35px">
          </template>
        </van-field>
      </div>
      <div v-show="show_phone" style="width: 400px;height: 100px">
        <van-field label="手机号:" placeholder="请输入手机号" v-model="phone" style="width: 350px; " ></van-field>
        <van-field label="验证码:" placeholder="请输入验证码" v-model="phone_code" style="width: 350px" >
          <template #button>
            <van-button size="small" type="primary" @click="post_phone_code" v-show="show_phone_code">发送验证码</van-button>
            <van-button size="small" type="primary"  v-show="show_state">
              <van-count-down
                  ref="countDown"
                  millisecond
                  :time="60000"
                  :auto-start="false"
                  format="ss倒计时"
                  @finish="finish_code()"/>
            </van-button>
          </template>
        </van-field>
      </div>

            <van-popup v-model:show="window_phone_code" closeable style="width: 400px;height: 150px">
              <div style="width: 400px;height: 100px">
                <div style="width: 200px;height: 30px">
                </div>
                <center>
                  <div>
                    <van-field label="验证码:" placeholder="请输入验证码" v-model="verification_code" style="width: 350px" @change="account_code">
                      <template #button>
                        <img :src="imageurl" alt="图形验证码" class="pic_code" @click="get_image"
                             style="width: 100px;height: 35px">
                      </template>
                    </van-field>
                    <van-button @click="confirm_mailbox">确定</van-button>
                  </div>
                </center>
              </div>


            </van-popup>

      <van-button @click="logins" size="large" style="width: 320px;background-color: gold">登录</van-button>
      <div class="login-blocks sns-login-links" style="width: 320px">
        <div style="float: left"><div style="float: left"><img :src='dingding' alt="" style="width: 20px"></div><div style="float: right"><a :href="dingdingurl" target="_self" class="alipay-login">钉钉登录</a></div></div>
          <div style="float: left"><div style="float: left"><img :src='git' alt="" style="width: 20px"></div><div style="float: right"><a :href="giturl" target="_self" class="alipay-login">git登录</a></div></div>
      </div>
      <div style="width: 150px;float: right"></div>

    </center>
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
  name: "login",
  data(){
    return{
      username:'',
      password:'',
      email:'',
      email_code:'',
      phone:'',
      phone_code:'',
      imageurl:'',
      dingding:'http://localhost:5000/static/t0107060bb7771fd444.gif',
      git:'http://localhost:5000/static/708f18f6-641e-4d59-8f81-240129802b88.png',
      giturl:'',
      dingdingurl:'',
      // 图形验证码
      verification_code:'',


      // 查看发送邮箱验证码
      show_emil_code:true,
      // 倒计时邮箱
      show_emil_state:false,
      // 手机号登录
      show_phone:false,
      // 手机号验证码发送
      show_phone_code:true,
      // 手机验证码倒计时
      show_state:false,
      // 用户名登录
      show_username:true,
      // 弹创图片验证码
      window_phone_code:false,
      // 图形验证码
      Figure_code:'',
    }
  },
  methods:{
    account_code(){
      this.myaxios('http://localhost:5000/account_code', 'post',
          {'verification_code':this.verification_code})
          .then(res => {
            console.log(res)
            if (res.code!='200'){
              alert(res.msg)
            }
          })
    },
    // 确定图形验证码验证码
    confirm_mailbox(){
      this.myaxios('http://localhost:5000/confirm_mailbox', 'get',
          {'verification_code':this.verification_code})
          .then(res => {
            console.log(res)
            if (res.code=='200'){
              alert(res.msg)
              this.window_phone_code=false
              this.show_phone_code = false
              this.$refs.countDown.start();
              this.show_state=true
              this.myaxios('http://localhost:5000/mobile_phone', 'get',
                  {'phone':this.phone})
                  .then(res => {
                    console.log(res)
                  })
            }else if (res.code=='403'){
              alert(res.msg)
            }


          })
    },
    dingding_login(){
      // 钉钉登录
      this.myaxios('http://localhost:5000/dingding_url', 'get',
          {})
          .then(res => {
            console.log(res)
            console.log(res)
            this.dingdingurl=res.url
          })
    },
    // 手机号验证码倒计时
    finish_code(){
// 倒计时结束时
      this.show_phone_code=true
      this.show_state=false
    },
    // 登录接口
    logins(){
      console.log(this.show_username)
      console.log(this.show_phone)
      if(this.show_username==true){
        // 用户密码验证登录
        this.myaxios('http://localhost:5000/account_password_login', 'post',
            {
              'username': this.username,
              'password': this.password,
              'verification_code': this.verification_code
            })
            .then(res => {
              console.log(res)
              if (res.code==200){
                localStorage.setItem('usrid',res.id)
                localStorage.setItem('token',res.token)
                localStorage.setItem('username',res.username)
                localStorage.setItem('login_hours',res.login_hours)
                localStorage.setItem('account_one',res.account_one)
                window.location.href='/financial_homepage'
              }else if (res.code!=200){
                alert(res.msg)
              }
            })
      }else {
        // 手机号验证登录
        if(this.show_phone==true){
          console.log(55999)
          this.myaxios('http://localhost:5000/SmsLogin', 'post',
              {
                'mobile': this.phone,
                'mcode': this.phone_code,
              })
              .then(res => {
                console.log(res)
                if (res.code==200){
                  localStorage.setItem('usrid',res.id)
                  localStorage.setItem('token',res.token)
                  localStorage.setItem('username',res.username)
                  localStorage.setItem('login_hours',res.login_hours)
                  localStorage.setItem('account_one',res.account_one)
                  window.location.href='/financial_homepage'
                }else if (res.code!=200){
                  alert(res.msg)
                }
              })
        }

      }

    },
    // 获取三方接口
    tripartite(){
      this.myaxios('http://localhost:5000/git_ee', 'get',
          {})
          .then(res => {
            console.log(res)
            this.giturl=res.url
          })
    },
    // 用户名登录
    show_true_username(){
    this.show_username=true
      this.show_phone=false
    },
    // 邮箱验证码
    finish_mail_code(){
      this.show_emil_code=true
      this.show_emil_state=false
    },
    // 验证码
    post_phone_code(){
      this.show_phone_code = true
      this.window_phone_code = true
      this.get_image()

    },
    post_emil_code(){
      this.$refs.countDowns.start();
      this.show_emil_code=false
      this.show_emil_state=true
    },
    // 手机号登录
    show_true_phone(){
      this.show_username=false
      this.show_phone=true
    },
    // 正则验证
    chang_poe(){

    },
    get_image(){
      let uuid=uuid4()
      this.imageurl='http://localhost:5000/getimagecode/?uuid='+uuid
    }

  },
  mounted() {
  this.get_image()
  this.tripartite()
  this.dingding_login()
  }
}
</script>

<style>

</style>
